<template>
	<view class="order">
		<view class="team_top">
			<view class="nav">
				<u-tabs :list="navList" height='88' active-color='#26C281' inactive-color='#222222' :is-scroll="false"
					:current="current" @change="navChange"></u-tabs>

			</view>
			
			<view class="user-box">
				<view class="left">
					<view class="color2">代理姓名：{{user_info.nickname}}</view>
					<view class="color2">账号：{{user_info.username}} </view>
				</view>
				<u-button size="mini" type="success" @click="yongjinShow = true">推广奖励设置说明</u-button>
			</view>
			
			<view class="search_box">
				<u-dropdown active-color="#26C281" v-if="false">
					<u-dropdown-item title="筛选">
						<u-form :model="qureyData" ref="uForm" class="dropdown-form" label-width="160">
							<u-form-item label="版本">
								<view class="dropdown-form-item" @click="handelSelect('card_type')">
									<view class="dropdown-form-item-text">{{dropdownTitle('card_type')}}</view>
									<u-icon name="arrow-right"></u-icon>
								</view>
							</u-form-item>
							<u-form-item label="运营商">
								<view class="dropdown-form-item" @click="handelSelect('cate_id')">
									<view class="dropdown-form-item-text">{{dropdownTitle('cate_id')}}</view>
									<u-icon name="arrow-right"></u-icon>
								</view>
							</u-form-item>
							<u-form-item label="结算周期" v-if="current == 0">
								<view class="dropdown-form-item" @click="handelSelect('day_value')">
									<view class="dropdown-form-item-text">{{dropdownTitle('day_value')}}</view>
									<u-icon name="arrow-right"></u-icon>
								</view>
							</u-form-item>
							<u-form-item label="充值金额">
								<u-input v-model="qureyData.name" />
							</u-form-item>
							
							<view style="display: flex; justify-content: center; padding: 30rpx;">
								<u-button type="primary" size="medium" 
									style="margin-right: 20rpx; background-color: #26C281;" @click="getList()">查询</u-button>
								<u-button size="medium" @click="resetForm()">重置</u-button>
							</view>
						</u-form>
					</u-dropdown-item>
					<!-- <u-dropdown-item v-model="card_type" :title="banbenTitle" :options="actionSheetList" @change="confirm"></u-dropdown-item>
					<u-dropdown-item v-if="current != 0" v-model="day_value" :title="jiesuanTitle" :options="day_actionSheetList" @change="confirm"></u-dropdown-item>
					<u-dropdown-item v-if="current == 0" v-model="cate_id" :title="cate_idTitle" :options="cate_idTitleSheetList" @change="confirm"></u-dropdown-item> -->
				</u-dropdown>
				<!-- <view class="dropdown-button">
					<u-button size="mini" @click="handelopup(0)">推广必读</u-button>
				</view>
				<view class="dropdown-button">
					<u-button size="mini" @click="handelopup(1)">重要通知</u-button>
				</view> -->
				<view class="left-dropdown-button">
					<view class="dropdown-button" v-if="!tyShow">
						<u-button size="mini" type="success" @click="handeloTyxg()">批量操作</u-button>
					</view>
					<view class="dropdown-button" v-if="tyShow && current == 0">
						<u-button size="mini" type="success" @click="handelxia()">下架至卡品仓</u-button>
					</view>
					<view class="dropdown-button" v-if="tyShow && current == 1">
						<u-button size="mini" type="success" @click="handelshang()">上架至售卖中</u-button>
					</view>
					<view class="dropdown-button" v-if="tyShow">
						<u-button size="mini" type="success" @click="handelquxiao()">取消</u-button>
					</view>
				</view>
				
				<view class="dropdown-button">
					<u-button v-if="current == 0" size="mini" type="success" @click="tongyi()">设置您得到的推广奖励</u-button>
				</view>
			</view>
			
			
		</view>
		<view style="height: 380rpx;"></view>
		<!--  -->
		<view class="no_html" v-if="list.length==0">
			<image src="@/static/images/no_img5.png" mode=""></image>
			<text>暂无信息</text>
		</view>
		<view v-else>
			<view class="list" v-for="(item,index) in list" :key="index" @click="detailsBtn(item.id)">
				<view class="list_top">
					<view class="text">
						<text class="color2">{{item.cate_id_text}}</text>
					</view>
					<!-- <view class="text">
						<view>{{item.name}}</view>
					</view> -->
					<!-- <view class="text right1">
						<view >店主待审核</view>
					
					</view> -->
				</view>
				<view class="goods_info">
					<view class="image">
						<image :src="item.photos" mode="aspectFill"></image>
					</view>
					<view class="info">
						<view class="name one-txt-cut" style="color: red;font-weight: bold;">{{item.name}}</view>
						<!-- <view class="tip">
							<text>佣金：{{item.junior_rebate}}</text>
						</view> -->
						<view class="money1">
							<view class="left">
								<!-- <text>佣金：{{item.junior_rebate}} 元</text> -->
								<text>您得到的推广奖励{{item.junior_rebate}}元</text>
							</view>
						</view>
						<view class="money1">
							<view class="left">
								<!-- <text>佣金：{{item.junior_rebate}} 元</text> -->
					
								<text>下级代理佣金{{item.user_rebate}}元</text>
							</view>
						</view>
						<!-- <view class="money1">
							<view class="left">
								<text>状态：{{item.is_soldout>0?'卡片仓库':'售卖中'}} </text>
							</view>
						</view> -->
						<!-- <view class="money1">
							<view class="left">
								<text>版本：{{item.is_soldout>0?'已下架':'正常'}} </text>
							</view>
						</view> -->
					</view>
				</view>
				<!-- <view class="tip_txt1">
					<view class="left">共1种商品</view>
					<view class="right">
						<text class="txt1">合计：</text>
						<text class="txt2">￥</text>
					</view>
				</view> -->
				<view class="list_btn">
					<view>
						<u-checkbox v-if="tyShow" v-model="item.checked" shape="circle" active-color="#007bff" style="font-weight: bold;"></u-checkbox>

					</view>
					<!-- 仓储才有 -->
					<!-- <text class="btn1" @click.stop="logisticsBtn(item.order_num)">查看物流</text> -->
					<view class="list_btn-btn">
						<text class="btn2" v-if="item.is_soldout > 0" @click.stop="xiajia(item.id,1)">下架至卡品仓库</text>
						<text class="btn1" v-else @click.stop="xiajia(item.id,2)">上架至售卖中</text>
						<text class="btn2" @click.stop="receiptBtn(item.id,item.user_rebate)">修改佣金</text>
					</view>
				</view>
			</view>
		</view>
		<view class="mall_loading" v-if="list.length">
			<u-loadmore :status="status" color='#999' />
		</view>
		<!-- 确认收货 -->
		<ConfirmReceipt ref="confirm_receipt" @submit='submitBtn'></ConfirmReceipt>
		
		<!-- 筛选选择器 -->
		<u-select v-model="dropdownShow" :list="dropdownList" @confirm="selectConfirm" confirm-color="#26C281"></u-select>
		
		<u-popup v-model="yongjinShow" mode="center" border-radius="16" width="590rpx" height="900rpx">
			<view class="gy-center-title">佣金修改说明</view>
			<scroll-view :scroll-y="true" class="gy-center goods-tz-content">
				<u-parse :html="configData.xiaji_yongjin_content"></u-parse>
			</scroll-view>
			<view class="gy-bottom" @click="yongjinShow = false">我知道</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import ConfirmReceipt from '@/components/confirm_receipt/confirm_receipt.vue';
	export default {
		components: {
			ConfirmReceipt
		},
		data() {
			return {
				yongjinShow: false,
				configData: {},
				navList: [{
					id: '2',
					name: '售卖中'
				}, 
				{
					id: '1',
					name: '卡品仓库'
				},
				// {
				// 	id: '1',
				// 	name: '电信'
				// }, {
				// 	id: '2',
				// 	name: '联通'
				// }, {
				// 	id: '3',
				// 	name: '移动'
				// },
				// {
				// 	name: '宽带'
				// },
				// {
				// 	name: '激活日结'
				// },
				],
				current: 0,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				page: 1,
				list: [],
				ids: '',
				user_info: [],
				show: false,
				dayconfig:[],
				
				card_type: '',
				day_value: '',
				card_type_list: [
					{
						value: '',
						label: '全部'
					},
					{
						value:2,
						label: '激活版'
					},
					{
						value:1,
						label: '充值版'
					},
					{
						value:3,
						label: '纯激活'
					}
				],
				day_value_list: [
					{
						value: '',
						label: '全部'
					},
					{
						value:1,
						label: '当日结算'
					},
					{
						value:2,
						label: '次日结算'
					},
					{
						value:3,
						label: '第三天结算'
					},
					{
						value:4,
						label: '第四天结算'
					},
					{
						value:5,
						label: '第五天结算'
					},
					{
						value:6,
						label: '次月底结算'
					},
				],
				cate_id: '',
				cate_id_list: [
					{
						value: '',
						label: '全部'
					},
					{
						value:1,
						label: '电信'
					},
					{
						value:2,
						label: '联通'
					},
					{
						value:3,
						label: '移动'
					},
				],
				qureyData: {},
				dropdownType: '',
				dropdownShow: false,
				dropdownList: [],
				tyShow: false
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.userinfo
			}),
			banbenTitle() {
				const text = this.actionSheetList.find(i => this.card_type == i.value).label
				return text == '全部' ? '版本' : text
			},
			jiesuanTitle() {
				const text = this.day_actionSheetList.find(i => this.day_value == i.value).label
				return text == '全部' ? '结算时间' : text
			},
			cate_idTitle() {
				const text = this.cate_idTitleSheetList.find(i => this.cate_id == i.value).label
				return text == '全部' ? '运营商' : text
			}
		},
		onShow() {
		},
		onLoad(opt) {
			// this.peizhi()
			this.page = 1
			this.ids = opt.ids;
			// this.getList()
			this.navChange(0)
			this.bankList()
			this.$httpApi.indexConfig().then(res => {
				this.configData = res.data
			})
		},
		onHide() {
			this.$refs.confirm_receipt.closeBtn()
		},
		methods: {
			handeloTyxg() {
				this.tyShow = true
			},
			handelquxiao() {
				this.tyShow = false
			},
			handelshang() {
				const checkedids = this.list.filter(item => item.checked).map(i => i.id)
				if(checkedids.length == 0) {
					this.$tips.showToast('请选择要售卖中的信息')
					return
				}
				const ids = checkedids.join(',')
				this.xiajia(ids, 2)
			},
			handelxia() {
				const checkedids = this.list.filter(item => item.checked).map(i => i.id)
				if(checkedids.length == 0) {
					this.$tips.showToast('请选择要放入卡品仓库的信息')
					return
				}
				const ids = checkedids.join(',')
				this.xiajia(ids, 1)
			},
			dropdownTitle(type) {
				const text = this[type + '_list'].find(i => this.qureyData[type] == i.value)
				return text ? text.label : '全部'
			},
			resetForm() {
				this.qureyData = {}
			},
			handelSelect(type) {
				this.dropdownShow = true
				this.dropdownType = type
				this.dropdownList = this[this.dropdownType+'_list']
			},
			selectConfirm(e) {
				this.$set(this.qureyData, this.dropdownType, e[0].value)
			},
			// 	peizhi(){
			// 	this.$httpApi.zqRange().then((res)=>{
			// 		this.dayconfig = res.data;
			// 	})
			// },
			bankList() {
				var that = this
				that.$tips.showLoading('加载中')
				var params = {
					ids: this.ids
				}
				that.$httpApi.userAgedit(params).then((res) => {
					that.$tips.hideLoading()
					if (res.code == 1) {
						that.user_info = res.data;
					}
				})
			},
			confirm(e) {
				this.page = 1
				this.getList()	
			},
			// 列表
			getList() {
				var that = this
				if (that.page == 1) {
					that.$tips.showLoading('加载中')
				} else {
					that.status = 'loading'
				}
				var params = {
					page: that.page,
					agent_id: that.ids,
					card_type:that.qureyData.card_type,
					day_value: that.qureyData.day_value
				}
				
				if(that.current == 0) {
					// 日结
					params.cate_id = that.qureyData.cate_id
					params.jiesuan_type = 2
				} else if (that.current == 1) {
					 // 主推
					params.is_extend = 2
					params.day_value = ''
				}
				params.state = that.navList[that.current].id
				// var params = {
				// 	page: that.page,
				// 	agent_id: this.ids,
				// 	cate_id: cate_id,
				// 	card_type:that.card_type,
				// 	day_value:that.day_value
				// }
				that.$httpApi.orderList(params).then((res) => {
					if (res.code == 1) {
						if (that.page == 1) {
							that.list = []
							that.$tips.hideLoading()
						}
						if (res.data.current_page == res.data.last_page) {
							that.status = 'nomore'
						} else {
							that.status = 'loadmore'
						}
						that.list = that.list.concat(res.data.data).map(i => ({...i, checked: false}))
					}
				})
			},

			// 切换
			navChange(index) {
				this.current = index
				this.card_type = index == 4 ? 2 : ''
				this.day_value = 4
				this.page = 1
				this.getList()
			},
			// 联系客服
			xiajia(ids,status) {
				var that = this
				var content = "确认放入仓库吗？";
				if(status == 2){
					content = "确认上架吗？";
				}
				uni.showModal({
				    title: '提示',
				    content: content,
				    success: function (res) {
				        if (res.confirm) {
				            var params = {
				            	ids: ids,
				            	agent_id: that.ids,
				            	status:status
				            }
				            that.$httpApi.soldout(params).then((res) => {
				            	if (res.code == 1) {
				            		that.$tips.showToast('操作成功')
				            		window.location.reload()
				            	}
				            })
				        } 
				    }
				});

				
				
			},
			
			// 修改佣金
			receiptBtn(val, rebate) {
				this.$refs.confirm_receipt.openBtn(val, this.ids, rebate)
			},
			tongyi() {
				// this.$refs.confirm_receipt.openBtnTwo(this.ids)
				this.$refs.confirm_receipt.openBtnThree(this.ids)
			},
			submitBtn() {
				this.page = 1
				this.getList()
			},
		},
		onReachBottom() {
			if (this.status == 'nomore' || this.status == 'loading') {
				return
			}
			this.page++
			this.getList()
		},
	}
</script>

<style lang="less">
	.gy-center-title {
		padding: 20rpx 0;
		text-align: center;
		font-weight: 700;
		color: #000000;
	}
	.gy-center {
		padding: 0 30rpx;
	}
	.gy-center-p {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		line-height: 42rpx;
		color: #666;
		
	}
	.gy-center-p-border {
		border-bottom: 1rpx solid #e5e5e5;
	}
	.gy-content {
		height: 840rpx;
		overflow-y: auto;
	}
	.goods-tz-content {
		box-sizing: border-box;
		height: 700rpx;
		overflow-y: auto;
		cursor: pointer;
	}
	.gy-bottom {
		border-top: 1rpx solid #e5e5e5;
		text-align: center;
		padding-top: 50rpx;
		color: #148EFF;
	}
	
	.dropdown-form {
		padding: 0 32rpx;
		background-color: #fff;
	}
	.dropdown-form-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.dropdown-form-item-text {
			flex: 1;
			color: #666;
		}
	}
	.dropdown-button {
		margin-right: 32rpx;
	}
	.search_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		width: 100%;
		padding-bottom: 30rpx;
		
		.left-dropdown-button {
			flex: 1;
			padding-left: 30rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}
		
		::v-deep .u-dropdown__content {
			width: 750rpx;
			height: 100%;
		}
		// padding: 0 40rpx;
		.btn_box {
			width: 100%;
			display: flex;
			justify-content: center;
			.btn {
				margin: 10rpx;
				width: 160rpx;
			}
			.confirm {
				background-color: #00afaa;
				color: #fff;
			}
		}
	}
	.user-box {
		margin: 20rpx;
		background: #f1f1f1;
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius:10rpx;
		line-height:200%;
		.r-btn{border:1rpx solid #ccc;padding:6rpx 20rpx; background: #fff;border-radius:6rpx;}
	}

	.order {
		width: 100%;

		.team_top {
			position: fixed;
			z-index: 10;
			width: 100%;
			background: #fff;
			border-bottom: 2rpx solid #f7f8fa;

			.nav {
				width: 100%;
				height: 88rpx;
			}
		}

		// 
		.list {
			width: 100%;
			background: #fff;
			margin-bottom: 24rpx;

			.list_top {
				width: 100%;
				line-height: 88rpx;
				padding: 0 32rpx;
				border-bottom: 2rpx solid #f7f8fa;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.text {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					display: flex;
					align-items: center;

					text {
						display: block;
						margin-right: 10rpx;
						padding: 0 15rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						border-radius: 5rpx;
					}

					.color1 {
						background: #FFA551;
					}

					.color2 {
						background: #26C281;
					}

					.color3 {
						background: #148EFF;
					}

					.color4 {
						background: #BC171B;
					}
				}

				.right {
					color: #666;
				}

				.right1 {
					color: #FF6230;
				}
			}

			.goods_info {
				width: 100%;
				padding: 24rpx 32rpx;
				border-bottom: 2rpx solid #f7f8fa;
				display: flex;

				.image {
					position: relative;
					width: 168rpx;
					height: 168rpx;

					image {
						display: block;
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				.info {
					width: calc(100% - 168rpx);
					padding-left: 20rpx;
					height: 168rpx;

					.name {
						width: 100%;
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
					}

					.tip {
						width: 100%;
						padding-top: 20rpx;
						display: flex;

						text {
							padding: 6rpx 10rpx;
							font-size: 24rpx;
							background: #eee;
							color: #999;
							border-radius: 5rpx;
						}
					}

					.money {
						width: 100%;
						padding-top: 10rpx;
						display: flex;
						align-items: center;

						text {
							padding-right: 32rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
						}

						.color1 {
							color: #FF6230;
						}

						.color2 {
							color: #26C281;
						}
					}

					.money1 {
						width: 100%;
						padding-top: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							display: flex;
							align-items: center;

							image {
								display: block;
								width: 40rpx;
								height: 40rpx;
							}

							text {
								padding-left: 5rpx;
								font-size: 32rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #222222;
							}
						}

						.right {
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}

					.num {
						width: 100%;
						padding-top: 25rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #222222;
						}

						.right {
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}
			}

			.tip_txt1 {
				width: 100%;
				padding: 25rpx 32rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				.right {
					display: flex;
					align-items: center;

					.txt1 {
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}

					image {
						display: block;
						width: 40rpx;
						height: 40rpx;
					}

					.txt2 {
						padding-left: 10rpx;
						font-size: 40rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}
				}
			}

			.tip_txt {
				width: 100%;
				padding: 25rpx 32rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.txt {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
					display: flex;
					align-items: center;

					text {
						display: block;
						width: 40rpx;
						height: 40rpx;
						line-height: 39rpx;
						font-size: 24rpx;
						margin-right: 5rpx;
						text-align: center;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						border-radius: 5rpx;
					}

					.color1 {
						background: #FF815A;
					}

					.color2 {
						background: #43A5FF;
					}

					.color3 {
						background: #51CE9A;
					}
				}
			}

			.list_btn {
				width: 100%;
				padding: 32rpx;
				display: flex;
				justify-content: space-between;
				
				.list_btn-btn {
					display: flex;
					justify-content: flex-end;
				}

				text {
					margin-left: 12rpx;
					display: block;
					padding: 0 20rpx;
					height: 64rpx;
					line-height: 60rpx;
					border-radius: 32rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
				}

				.btn1 {
					color: #999;
					border: 2rpx solid #EBEBEB;
				}

				.btn2 {
					color: #26C281;
					border: 2rpx solid #26C281;
				}
			}
		}
	}
</style>